<template>
	<section class="main">
				<input id="toggle-all" 
    class="toggle-all" 
    type="checkbox"
    :checked="isAllDone"
    @click="changeFn"
    >
				<label for="toggle-all">Mark all as complete</label>
				<ul class="todo-list">
					<!-- These are here just to show the xtructure of the list items -->
					<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
					<li 
       :class="{completed:item.isDone}" 
       v-for="(item,index) in arr" 
       :key="item.id">
						<div class="view">
							<input class="toggle" type="checkbox" v-model="item.isDone">
							<label>{{ item.name }}</label>
							<button class="destroy" @click="del(index)"></button>
						</div>
					</li>
				</ul>
			</section>
</template>

<script>
export default {
props:['arr'],
methods: {
 del(index) {
  this.$emit('delFn',index)
 },
 changeFn(e) {
  this.arr.forEach(item => item.isDone = e.target.checked)
 }
},
computed: {
 isAllDone() {
  return this.arr.every(item => item.isDone)
 }
}
}
</script>

<style>

</style>